import QtQuick 2.2
/*
* 如果Loader加载的Item想处理按键事件，那么必须将Loader对象的focus属性设置为true。又因为Loader本身也是一个焦点敏感的对象，所以如果它加载的Item处理了按键事件，则应当将事件的accepted属性设置为true,以免已经被吃掉的事件再传递给Loader。
*/

Rectangle {
	width: 320;
	height: 240;
	color: "#EEEEEE";

	Text {
		id: coloredText;
		anchors.horizontalCenter: parent.horizontalCenter;
		anchors.top: parent.top;
		anchors.topMargin: 4;
		text: "Hello World!";
		font.pixelSize: 32;
	}

	Component {
		id: colorComponent;
		Rectangle {
			id: colorPicker;
			width: 50;
			height: 30;
			signal colorPicked(color clr);
			property Item loader;
			border.width: focus ? 2 : 0;
			border.color: focus ? "#90D750" : "#808080";
			MouseArea {
				anchors.fill: parent;
				onClicked: {
					colorPicker.colorPicked(colorPicker.color);
					loader.focus = true;
				}
			}
			Keys.onReturnPressed: {
				colorPicker.colorPicked(colorPicker.color);
				loader.focus = true;
			}
			Keys.onSpacePressed: {
				colorPicker.colorPicked(colorPicker.color);
				loader.focus = true;
			}
		}
	}

	Loader {
		id: redLoader;
		width: 80;
		height: 60;
		focus: true;
		anchors.left: parent.left;
		anchors.leftMargin: 4;
		anchors.bottom: parent.bottom;
		anchors.bottomMargin: 4;
		sourceComponent: colorComponent;
		KeyNavigation.right: blueLoader;
		KeyNavigation.tab: blueLoader;
		onLoaded: {
			item.color = "red";
			item.focus = true;
			item.loader = redLoader;
		}
		onFocusChanged: {
			item.focus = focus;
		}
	}

	Loader {
		id: blueLoader;
		anchors.left: redLoader.right;
		anchors.leftMargin: 4;
		anchors.bottom: parent.bottom;
		anchors.bottomMargin: 4;
		sourceComponent: colorComponent;
		KeyNavigation.right: redLoader;
		KeyNavigation.tab: redLoader;
		onLoaded: {
			item.color = "blue";
			item.loader = blueLoader;
		}
		onFocusChanged: {
			item.focus = focus;
		}
	}

	Connections {
		target: redLoader.item;
		onColorPicked: {
			coloredText.color = clr;
		}
	}

	Connections {
		target: blueLoader.item;
		onColorPicked: {
			coloredText.color = clr;
		}
	}
}
